<template>
    <div class="detail-wrapper">
        <header class="cnode-topic-header cnode-topic-title">{{ topic.title }}</header>
        <section class="cnode-topic-labels">
            <div class="cnode-topic-labels-left">
                <label v-if="topic.top" class="tag" :class="{top: topic.top}">置顶</label>
                <label v-if="topic.good" class="tag" :class="{good: topic.good}">推荐</label>
            </div>
            <div class="cnode-topic-labels-right">
                <i  v-if="topic.is_collect" 
                    class="iconfont icon-like_fill collect"
                    @click="collect(false)"></i>
                <i  v-else 
                    class="iconfont icon-like collect"
                    @click="collect(true)"></i>
            </div>
        </section>
        <section class="cnode-topic-meta">
            <avatar :src="topic.author.avatar_url" :alt="topic.author.loginname"></avatar>
            <div class="cnode-topic-info">
                <div class="cnode-col">
                    <div>{{ topic.author.loginname }}</div>
                    <div>
                        发布于: 
                        <timeago :since="topic.create_at"></timeago>
                    </div>
                </div>
                <div class="cnode-col cnode-topic-numbers">
                    <div v-if="topic.reply_count">
                        {{ topic.reply_count }} 人回复
                    </div>
                    <div v-if="topic.visit_count">
                        {{ topic.visit_count }} 人浏览
                    </div>
                </div>
            </div>
        </section>
        <section class="cnode-topic-content markdown-body" v-html="topic.content"></section>
        <section class="cnode-topic-reply">
            <header class="cnode-topic-header reply-header">
                <span class="cnode-topic-title">回复（{{ topic.reply_count }}）</span>
                <i class="iconfont icon-pinglun3-copy reply-btn" @click="reply"></i>
            </header>
            <reply-list v-if="slowLoad" :list="topic.replies" :topic-id="topic.id"></reply-list>
        </section>
    </div>
</template>

<script>
import Avatar from '@/components/Avatar'
import ReplyList from '@/components/Reply-list'
import Reply from '@/components/reply'
import { mapState ,mapActions, mapMutations } from 'vuex'
import { RESET_TOPIC, SET_ERROR } from '@/store/detail'

export default {
    name: 'detail',
    components: {
        Avatar,
        ReplyList
    },
    data() {
        return {
            slowLoad: false
        }
    },
    metaInfo() {
        return {
            title: this.topic.title,
            titleTemplate: '%s - Cnode',
            meta: [
                {name: 'keywords', content: `cnode,PWA,${this.topic.title}`},
                {name: 'description', content: this.topic.title}
            ]
        }
    },
    beforeRouteLeave(to, from, next) {
        this.reset()
        next()
    },
    computed: {
        ...mapState('detail', ['hasError', 'topic']),
        ...mapState('appShell/common', ['userInfo'])
    },
    mounted() {
        setTimeout(() => {
            this.slowLoad = true
        }, 0)
    },
    async asyncData({store, route}) {
        if (!route.params.id) {
            store.commit(SET_ERROR, true);
            return;
        }
        store.dispatch('detail/getTopic', route.params.id)
    },
    methods: {
        ...mapActions('detail', ['replyTo', 'toCollect']),
        ...mapMutations('detail', {
            reset: RESET_TOPIC
        }),
        async reply() {
            if (!this.userInfo.accessToken) {
                return this.$router.push('/login')
            }
            const content = await Reply()

            this.replyTo({
                content,
                topicId: this.topic.id,
            })
        },
        collect(status) {
            if (!this.userInfo.accessToken) {
                return this.$router.push('/login')
            }

            this.toCollect(status)
        }
    }
};
</script>

<style lang="scss" scoped>
$label-color: #2874f0;
$main-color: #1b76cf;
.detail-wrapper {
    padding-bottom: 20px;
    .cnode-topic-header {
        padding: 0 16px;
        padding-top: 14px;
        padding-bottom: 6px;
        color: $main-color;
        border-bottom: 1px solid #f1f1f1;
        &.cnode-topic-title, .cnode-topic-title {
            font-size: 18px;
            font-weight: 700;
        }
        &.reply-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            border-top: 1px solid #f1f1f1;
        }
        .reply-btn {
            font-size: 20px;
            font-weight: 400;
        }
    }
    .cnode-topic-labels {
        margin-top: 10px;
        padding: 0 16px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        label {
            font-size: 12px;
            padding: 2px 4px;
            border: 1px solid $label-color;
            color: $label-color;
            margin: 0 4px 4px 0;
            &.top {
                color: #E74C3C;
                border-color: #E74C3C;
            }
            &.ask {
                color: #3498DB;
                border-color: #3498DB;
            }
            &.good {
                color: #E67E22;
                border-color: #E67E22;
            }
            &.job {
                color: #9B59B6;
                border-color: #9B59B6;
            }
            &.share {
                color: #1ABC9C;
                border-color: #1ABC9C;
            }
        }
        .collect {
            color: #85db52;
            font-size: 24px;
            line-height: 1;
        }
    }
    .cnode-topic-meta {
        display: flex;
        padding: 0 16px;
        margin-top: 14px;
        padding-bottom: 6px;
        border-bottom: 1px solid #f1f1f1;
        align-items: center;
    }
    .cnode-topic-info {
        font-size: 12px;
        display: flex;
        flex: 1 0;
        justify-content: space-between;
        margin-left: 6px;
    }
    .cnode-topic-numbers {
        text-align: right;
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
    }
    .cnode-topic-content { 
        padding: 0 16px;
        margin-top: 14px;
        font-size: 14px;
    }
}
</style>

